<script setup>
import axios from 'axios'
import { defineProps } from 'vue'
import MobileDetail from '~/contentScripts/views/tao/detail/components/tool/mobileDetail.vue'

const props = defineProps([
  'tabId',
  'date',
])
// const tabs = ref([])
const data = ref([])
const columns = [
  {
    title: '排名',
    dataIndex: 'record_index',
    sorter: (a, b) => a.record_index - b.record_index,
    defaultSortOrder: 'ascend',
    width: 80,
  },
  {
    title: '话题名称',
    dataIndex: 'record_title',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 200,
    align: 'center',
  },
]
const loadData = () => {
  const date = props.date
  const tab_id = props.tabId
  axios.get('/Hot/feeds', {
    params: {
      date,
      tab_id,
    },
  }).then((res) => {
    data.value = res.data.data
  })
}
loadData()
// 深度监听props变化
watch(() => props, () => {
  loadData()
}, { deep: true })
</script>

<template>
  <a-table
    :columns="columns" :data-source="data" size="small" :pagination="false" :scroll="{
      y: 500,
    }"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'record_title'">
        <div>
          <a-row type="flex">
            <a-col style="padding-right: 10px">
              <a-image :src="record.record_cover" style="width: 30px; height: 30px;" />
            </a-col>
            <a-col flex="1">
              <a-button type="link" size="small" :href="`https://s.taobao.com/search?q=${record.record_title}`" target="_blank">
                {{ text }}
              </a-button>
            </a-col>
          </a-row>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'action'">
        <a-row type="flex">
          <a-col flex="1" style="text-align: center">
            <a-button type="link" size="small" :href="`https://s.taobao.com/search?q=${record.record_title}`" target="_blank">
              淘宝搜索
            </a-button>
          </a-col>
          <a-col flex="1" style="text-align: center">
            <MobileDetail :link="`https://market.m.taobao.com/app/main-search/h5search-webapp/home.html?q=${record.record_title}&recallText=1&channelSrp=trendnew_page&from=hotsearch-bangdandetail`">
              <a-button type="link" size="small">
                手淘搜索
              </a-button>
            </MobileDetail>
          </a-col>
        </a-row>
      </template>
    </template>
  </a-table>
</template>

<style scoped>

</style>
